import { messages } from "share/common";
import React, { Component } from "react";
import { Form, Input, Row, Col, Checkbox, Card, Badge, Button, Icon } from "antd";
import "styles/supplier-management/airline-config/platform-common.scss";

const FormItem = Form.Item;

@Form.create()
class SupportSuppliers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      maskIdx: -1,
    };

    this.centerMaskFlags = [];
  }

  maskCard = (idx) => {
    this.setState({ maskIdx: idx });
  };

  render() {
    return (
      <Row className="support-suppliers" gutter={20}>
        {this.props.supportSuppliers.map((supplier, idx) => (
          <Col className="card" span={6}>
            <div
              style={{ backgroundImage: `url(${supplier.logoUrl})` }}
              className="mask-before"
              onMouseOver={() => {
                this.maskCard(idx);
              }}
            />
            <div className="supplier-name">{supplier.supplierName}</div>
            {idx === this.state.maskIdx && (
              <div
                className="mask"
                onMouseLeave={(e) => {
                  this.setState({ maskIdx: -1 });
                }}
              >
                <a
                  className="center"
                  ref={(ref) => (this[`centerMask${idx}`] = ref)}
                  onClick={() => {
                    this.props.onAdd(supplier, idx);
                  }}
                >
                  {messages("supplier-1.key744") /*添加该服务商*/}
                </a>
              </div>
            )}
          </Col>
        ))}
      </Row>
    );
  }
}

export default SupportSuppliers;
